<template>
    <div class="wallet page">
        <formHeader :title="'我的钱包'"></formHeader>
        <div class="con">
            <div class="up">
                <div class="title">总额(元)</div>
                <div class="down">
                    <span class="money">{{money}}</span>
                    <span class="detail" @click="turn('/wallet/detail?type=0')">明细>></span>
                </div>
            </div>
            <div class="check">
                <div class="cell" @click="turn('/account/recharge')">
                    <span><img class="logo" src="./image/recharge.png" alt=""></span>
                    <span class="word">充值</span>
                    <span><img class="to" src="./image/Path.png" alt=""></span>
                </div>
                <div class="cell"  @click="turn('/withdraw/home')">
                    <span><img class="logo" src="./image/withdrow.png" alt=""></span>
                    <span class="word">提现</span>
                    <span><img class="to" src="./image/Path.png" alt=""></span>
                </div>
            </div>
            <div class="check">
                <div class="cell" @click="turn('/user')">
                    <span><img class="logo" src="./image/transfor.png" alt=""></span>
                    <span class="word">转账</span>
                    <span><img class="to" src="./image/Path.png" alt=""></span>
                </div>
                <div class="cell" @click="turn('/wallet/collected')">
                    <span><img class="logo" src="./image/collet.png" alt=""></span>
                    <span class="word">收款</span>
                    <span><img class="to" src="./image/Path.png" alt=""></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    export default {
        name : "index",
        components:{formHeader},
        methods:{
            turn(path){
                this.$router.push({
                    path
                })
            }
        },
        computed:{
            money(){
                let money = this.$route.query.money?this.$route.query.money:0
                money =Number(money).toFixed(2)
                return money
            }
        }
    }
</script>

<style scoped lang="stylus">
    .wallet
        background-color $page-bg
        .con
            margin-top 47px
        .up
            background-color #00D6C0
            padding 5px 15px 33px 15px
            color #F2FFFE
            .title
                font-size 13px
            .down
                margin-top 35px
                display flex
                justify-content space-between
                align-items flex-end
                .money
                    font-weight bold
                    font-size 50px
                    font-family DIN
                    color #FAFFFE
                .detail
                    color #DEFFFC
                    font-size 13px
        .check
            margin-bottom 10px
            .cell
                height 40px
                display flex
                padding 0 11px 0 20px
                font-size 15px
                color #333
                justify-content space-between
                align-items center
                background-color #fff
                border-bottom 1px solid #EDEDED
                .logo
                    width 21px
                    height 21px
                .to
                    width 14px
                    height 14px
                .word
                    flex 1
                    margin-left 15px

</style>
